.template {
  width: 100%;
  height: 100%;
  .page-wrap {
    background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/f5da25b0-d7bc-11eb-bacb-8953b7f66cc9_size_432x600#gif);
    .page {
      position: relative;
      width: 100%;
      height: 100%;
      .home {
        align-items: center;
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        position: relative;
  
        .container {
          align-items: center;
          display: flex;
          flex-direction: column;
          width: 600px;
          height: 1000px;
          justify-content: center;
          position: relative;
          z-index: 1;
  
          .avatar-wrap {
            .avatar {
              border-radius: 160px;
              width: 320px;
              height: 320px;
              opacity: 0;
              transform: scale(0.2, 0.2);
            }
          }
  
          .placeholder-icon {
            background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/4be225d0-d7d5-11eb-b9cf-31e54f991b4d_size_320x255);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 320px;
            height: 255px;
            margin-top: -58px;
            opacity: 0;
            transform: translateY(2000px);
          }
  
          .time {
            color: rgb(176, 124, 77);
            font-size: 30px;
            letter-spacing: 2px;
            line-height: 60px;
            position: relative;
            transform: translateY(2000px);
  
            &:after {
              background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/aa8a5de0-d7d6-11eb-9865-ddff28e26e7d_size_225x44#gif);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              bottom: -10px;
              content: " ";
              display: block;
              width: 100px;
              height: 6px;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
            }
          }
  
          .newlywed {
            color: rgb(176, 124, 77);
            font-size: 36px;
            font-weight: bold;
            letter-spacing: 4px;
            line-height: 70px;
            margin-top: 20px;
            transform: translateY(2000px);
          }
  
          .tip {
            color: rgb(176, 124, 77);
            font-size: 26px;
            font-weight: bold;
            letter-spacing: 2px;
            line-height: 32px;
            opacity: 0;
            transform: translateY(-2000px);
  
            &.small {
              font-size: 12px;
              line-height: 20px;
              transform: scale(0.2, 0.2);
            }
          }
        }

        .bg-image {
          background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/26e03230-d7bd-11eb-bacb-8953b7f66cc9_size_289x455#gif);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center center;
          bottom: 0px;
          left: 0px;
          right: 0px;
          top: 0px;
          position: absolute;
          transform: scale(0.2, 0.2);
        }
      }

      .golden-wrap {
        align-items: center;
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        position: relative;
        z-index: 1;

        .detail-wrap {
          flex-shrink: 0;
          width: 600px;
          height: 1000px;
          padding: 40px 30px;
          position: relative;
          
          .tip {
            color: rgb(176, 124, 77);
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-top: 16px;
            transform: translateY(2000px);

            &.split {
              display: flex;
              font-size: 16px;
              margin-top: 24px;
              margin-bottom: 32px;
              justify-content: space-between;
              opacity: 0;
              transform: scale(0.2, 0.2);
            }

            &.small {
              bottom: 42px;
              font-size: 10px;
              position: absolute;
              left: 0px;
              right: 0px;
            }
          }
          .title {
            font-size: 28px;
            line-height: 36px;
            margin: 40px 0px 32px;
            text-align: center;
            transform: translateY(2000px);
          }
          .footer {
            bottom: 60px;
            color: rgb(217, 163, 77);
            font-size: 32px;
            font-weight: bold;
            position: absolute;
            left: 0px;
            right: 0px;
            text-align: center;
            transform: scale(0.2, 0.2);
          }
          .avatar-wrap {
            background-color: #FFFFFF;
            box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
            width: 400px;
            padding: 16px;
            margin: 0 auto;
            opacity: 0;
            transform: scale(0.2, 0.2);
  
            .avatar {
              width: 100%;
            }
  
            .icon-bride {
              background-image: url();
              background-size: 171px 31px;
              background-repeat: no-repeat;
              background-position: center;
              width: 100%;
              height: 50px;
              transform: translateY(2000px);
            }

            .bride {
              color: rgb(77, 77, 77);
              font-size: 28px;
              font-weight: bold;
              text-align: center;
              transform: translateY(-2000px);
            }

            .icon-groom {
              background-image: url();
              background-size: 170px 32px;
              background-repeat: no-repeat;
              background-position: center;
              width: 100%;
              height: 50px;
              transform: translateY(2000px);
            }

            .groom {
              color: rgb(77, 77, 77);
              font-size: 28px;
              font-weight: bold;
              text-align: center;
              transform: translateY(-2000px);
            }
          }
          .image-group-column {
            .split {
              margin-top: 32px;
            }
            .image-wrap {
              &:first-child {
                transform-origin: right bottom;
                .image {
                  transform-origin: right bottom;
                }
              }
              &:last-child {
                transform-origin: left bottom;
                .image {
                  transform-origin: left bottom;
                }
              }
            }
          }
          .image-group-grid {
            background-color: #FFFFFF;
            box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
            display: flex;
            width: 520px;
            height: 420px;
            padding: 16px;
            margin: 0 auto;
            .column {
              display: flex;
              flex: 1;
              flex-direction: column;
              height: 100%;
              justify-content: space-between;
              padding-right: 10px;

              .avatar {
                width: 100%;
                height: 100%;
                opacity: 0;

                &.small {
                  height: 192px;
                }
              }

              &:last-child {
                padding-right: 0px;
              }
            }
          }
          .image-wrap {
            background-color: #FFFFFF;
            box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
            height: 320px;
            padding: 20px;
            opacity: 0;
            transform: scale(0.2, 0.2);
            .image {
              width: 100%;
              height: 100%;
            }
          }
          .map {
            opacity: 0;
            width: 100%;
            height: 420px;
            margin-top: 20px;
          }
          .row-wrap {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            .btn-phone {
              background-color: rgb(181, 132, 88);
              color: rgb(255, 255, 255);
              font-size: 24px;
              width: 220px;
              height: 60px;
              line-height: 60px;
              opacity: 0;
            }
            &.column {
              flex-direction: column;

              .row {
                color: rgb(77, 77, 77);
                margin-top: 16px;
                text-align: center;
                opacity: 0;
                &:nth-child(1) {
                  font-size: 24px;
                }
                &:nth-child(2) {
                  font-size: 24px;
                }
                &:nth-child(3) {
                  font-size: 36px;
                }
                &:nth-child(4) {
                  color: #4d4d4d;
                  font-size: 20px;
                }
              }
            }
          }
          .icon-beauty {
            background-image: url();
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 460px;
            height: 100px;
            margin: 50px auto;
            opacity: 0;
          }
          .icon-story {
            background-image: url();
            background-size: 100% 100%;
            width: 386px;
            height: 90px;
            margin: 0 auto;
            opacity: 0;
          }
          .layout-grid {
            display: flex;
            width: 100%;
            height: 760px;
            padding: 20px 0px;

            .avatar {
              width: 280px;
              height: 100%;
              opacity: 0;
            }

            .row {
              color: rgb(176, 124, 77);
              flex: 1;
              text-align: center;
              padding-top: 20px;

              .title {
                font-size: 32px;
                margin: 0px;
                opacity: 0;
              }

              .sub-title {
                font-size: 24px;
                margin-top: 24px;
                opacity: 0;
              }

              .content {
                color: #b07c4d;
                font-size: 24px;
                margin-top: 20px;
                opacity: 0;
              }

              .circle-image {
                border-radius: 100px;
                width: 200px;
                height: 200px;
                margin-top: 24px;
                opacity: 0;
              }
            }
          }
          .quotation {
            background-image: url();
            background-size: 293px 23px;
            background-repeat: no-repeat;
            background-position: top center;
            color: rgb(176, 124, 77);
            font-size: 24px;
            text-align: center;
            padding-top: 40px;
            margin-top: 40px;

            .row {
              margin-top: 16px;
              transform: translateY(2000px);

              &:nth-child(1) {
                margin-top: 0px;
              }
            }

            &.no-icon {
              background-image: none;
              padding: 0px 0px 0px 40px;
              margin-top: 16px;
              text-align: left;
            }

            &.center {
              padding-top: 40px;
              text-align: center;
            }
          }
          .golden-border {
            background-color: rgba(255, 255, 255, 0.6);
            border: 1px solid #876003;
            bottom: 0px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            z-index: -1;
            transform-origin: bottom center;
            &.side {
              transform: rotate(4deg) translateX(-40px);
              z-index: -2;
            }
          }
        }
      }

      .grass1 {
        background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/a8e20e70-d7bd-11eb-bacb-8953b7f66cc9_size_281x384);
        background-size: 100% 100%;
        bottom: -50px;
        position: absolute;
        width: 281px;
        height: 384px;
        transform: rotate(-90deg);
        transform-origin: left bottom;
        left: -126px;
      }

      .grass2 {
        background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/05f8ed90-d7be-11eb-bacb-8953b7f66cc9_size_257x444);
        background-size: 100% 100%;
        bottom: 206px;
        width: 257px;
        height: 444px;
        left: -70px;
        position: absolute;
        transform: rotate(-90deg);
        transform-origin: left bottom;
      }

      .grass3 {
        background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/37ec8e60-d7be-11eb-bacb-8953b7f66cc9_size_167x241);
        background-size: 100% 100%;
        bottom: 20px;
        width: 167px;
        height: 241px;
        position: absolute;
        transform: rotate(-90deg);
        transform-origin: left bottom;
        left: 60px;
      }

      .grass4 {
        background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/964af6c0-d7c0-11eb-bacb-8953b7f66cc9_size_168x195);
        background-size: 100% 100%;
        bottom: 150px;
        width: 168px;
        height: 195px;
        position: absolute;
        transform: rotate(-90deg);
        transform-origin: left bottom;
        left: 70px;
      }

      .grass5 {
        background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/4c922c00-d7c1-11eb-bacb-8953b7f66cc9_size_237x222);
        background-size: 100% 100%;
        bottom: 30px;
        width: 237px;
        height: 222px;
        position: absolute;
        transform: rotate(-90deg);
        transform-origin: left bottom;
        left: 188px;
      }

      .grass6 {
        background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/6154b260-d7c2-11eb-bacb-8953b7f66cc9_size_300x146);
        background-size: 100% 100%;
        width: 300px;
        height: 146px;
        position: absolute;
        transform: rotate(90deg);
        transform-origin: right top;
        right: -86px;
        top: 160px;
      }

      .grass7 {
        background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/706628f0-d7c3-11eb-b9cf-31e54f991b4d_size_284x123);
        background-size: 100% 100%;
        width: 284px;
        height: 123px;
        position: absolute;
        transform: rotate(90deg);
        transform-origin: right top;
        right: -100px;
        top: 234px;
      }

      .grass8 {
        background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/fef2c650-d7c3-11eb-b9cf-31e54f991b4d_size_217x139);
        background-size: right top;
        width: 217px;
        height: 139px;
        position: absolute;
        transform: rotate(90deg);
        transform-origin: right top;
        right: -128px;
        top: 346px;
      }

      .grass9 {
        background-image: url(https://sphimspic-1301060981.image.myqcloud.com/100100/768c9100-d7dd-11eb-9865-ddff28e26e7d_size_169x270);
        background-size: 100% 100%;
        bottom: 376px;
        width: 169px;
        height: 270px;
        position: absolute;
        transform: rotate(-90deg);
        transform-origin: left bottom;
        left: -106px;
      }
    }
  }
}

.arrow {
  background-image: url();
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  bottom: 60px;
  width: 100px;
  height: 100px;
  left: calc(50% - 50px);
  position: fixed;
}